<template>
  <div class="cart">
    <div class="hasGoods" v-if="gShow">
      <p class="title">我的购物车8</p>
      <div class="cartInfo">
        <ul>
<!--           <li v-for="(item,index) in list">
  <p @click="clickList(item)" class="click" :class="{'active':item.start}">&nbsp</p>
  <img src="static/images/prc01.jpg">
  <div class="info">
    <p class="sTitle">{{item.title}}</p>
    <p class="sPrce">¥{{item.price}}</p>
    <p class="sNum">
      <span class="less" @click="less(item)"></span>
      <input type="text" v-model="item.num" name="">
      <span class="add" @click="add(item)"></span>
    </p> 
  </div>
</li> -->

          <li v-for="(item,index) in List">
            <p @click="clickList(item)" class="click">&nbsp</p>
            <img :src="item.goods_logo">
            <div class="info">
              <p class="sTitle">{{item.goods_name}}</p>
              <p class="sPrce">¥{{item.goods_price}}</p>
              <p class="sNum">
                <span class="less" @click="less(item)"></span>
                <input type="text" v-model="item.goods_count" name="">
                <span class="add" @click="add(item)"></span>
              </p> 
            </div>
          </li>

        </ul>
      </div>
      <div class="clickBox">
          <p @click="allList" class="click" :class="{'active':allClick}">全选</p>
          <button>结算</button>
          <span class="num">合计 :<em> ¥{{sNum}}</em></span>
      </div> 
    </div>
    
    <!--如果没有商品时显示-->
    <div class="notGoods" v-else>
        <div class="cartBg">
            <em></em>
            <p>您的购物车还是空！</p>
            <a href="">马上去购物</a>
        </div>
    </div>

  </div>
</template>

<script>

import axios from 'axios'

export default {
  name: 'cart',
  data () {
    return {
      gShow:true,//购物车是否有商品
      allClick:false,//是否全选
/*      list:[
        {title:'睡眠曲智能音波床垫',price:1.00,num:'1',start:false},
        {title:'睡眠曲智能音波床垫',price:2.00,num:'1',start:false},
        {title:'睡眠曲智能音波床垫',price:3.00,num:'2',start:false},
        {title:'睡眠曲智能音波床垫',price:4.00,num:'3',start:false}
      ],*/
      List:[],
      getList:[]
    }
  },
  created(){
  },
  mounted(){
    this.getData()
  },
  computed:{
    sNum:function(){
      let sNum=0;
      for(var i=0;i<this.getList.length;i++){
          sNum+=this.getList[i].price*this.getList[i].num
      }
      return sNum
    }
  },
  methods:{
    getData(){
        if(this.vCheck()){
          let that=this
          axios({
            method: 'get',
            url: this.$store.state.url+'/carts',
            headers: {Authorization:"Bearer "+that.$store.state.token}
          }).then(function(data){
            console.log(data)
            that.List=data.data.data
          })
        }
    },
    less(e){
      let that=this
      if(e.goods_count>1){
        if(this.vCheck()){
            e.goods_count--
            let that=this
            let data={
              "goods_count":e.goods_count
            }
            axios({
              method: 'put',
              url: this.$store.state.url+'/carts/'+e.id,
              headers: {Authorization:"Bearer "+that.$store.state.token},
              data:data
            }).then(function(data){
              that.getData()
            })
          }
      }else{
        alert('从购物车中删除')
        axios({
              method: 'DELETE',
              url: this.$store.state.url+'/carts/'+e.id,
              headers: {Authorization:"Bearer "+that.$store.state.token}
            }).then(function(data){
              alert('删除成功')
              that.getData()
            })
      }
    },
    add(e){
      if(this.vCheck()){
            e.goods_count++
            let that=this
            let data={
              "goods_count":e.goods_count
            }
            axios({
              method: 'put',
              url: this.$store.state.url+'/carts/'+e.id,
              headers: {Authorization:"Bearer "+that.$store.state.token},
              data:data
            }).then(function(data){
              that.getData()
            })
          }
    },
    //选择单个商品
    clickList(e){
      if(e.start==false){
        e.start=true;
        this.getList.push(e);
      }else{
        var index = this.getList.indexOf(e);
        if (index > -1) {
        this.getList.splice(index, 1);
        e.start=false;
        }
        this.allClick=false
      }
    },
    //选择所有商品
    allList(){
      
      if(this.allClick==false){
        this.getList=[];
        var that=this;
        this.list.forEach(function(index){
          index.start=true;
          that.getList.push(index);
        });
        this.allClick=true
      }else{
        this.list.forEach(function(index){
          index.start=false
        });
        this.getList=[];
        this.allClick=false
      }
      
    },
    //关闭登录窗
    closeLogin(){
      this.$router.push({path:'/home'})
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped="" type="text/css">

$vw:750;
@function h($px){@return $px/$vw*100vw}

.cart{padding-bottom: h(110)}
.title{height: h(70);background: #f0eff5;font-size: h(30);padding:0 h(30);color: #38b6f0;line-height: h(70)}
.cartInfo .click{width: h(60);float: left;height: h(166);display: block;background: url('/static/images/out.png') 10% 50% no-repeat;background-size: 50%}
.cartInfo .click.active{background: url('/static/images/on.png') 10% 50% no-repeat;background-size: 50%}
.cartInfo ul li{background: #fff;position: relative;overflow: hidden;padding:h(25);margin-bottom: h(20)}
.cartInfo ul li img{width: h(166);height: h(166);float: left}
.cartInfo ul li .info{float: left;width: h(430);padding-left: h(30)}
.cartInfo .sTitle{font-size:h(32)}
.cartInfo .sPrce{font-size: h(30);color: #fd7b58;line-height: 1.6}

.sNum{height: 2.5rem;background: #fff;width: 100%;display: flex;align-items: center;}
.sNum span{font-size: h(60);display: inline-block;width: h(50);height: h(50);color: #999999;border: #999999 solid 1px;display: inline-block;line-height: h(60);vertical-align: center;}
.sNum span.less{background: url('/static/images/less.png') no-repeat;background-size: 100%;}
.sNum span.add{background: url('/static/images/add.png') no-repeat;background-size: 100%;}
.sNum input{width: h(100);background: #fff;height: h(48);border: #999999 solid 1px;border-radius: h(4);text-align: center;margin: 0 h(10);display: inline-block;vertical-align: center;}


.clickBox{height: h(100);line-height: h(100);background: #fff;padding-left:h(25);font-size: h(36)}
.clickBox .click{width: h(160);float: left;height: h(100);display: block;background: url('/static/images/out.png') 2% 50% no-repeat;background-size: auto 30%;padding-left: h(60)}
.clickBox .active{background: url('/static/images/on.png') 2% 50% no-repeat;background-size: auto 30%;}
.clickBox button{float: right;background: #fd7b58;width: h(170);height: 100%;border: none;font-size: h(36);color: #fff}
.clickBox .num{float: right;padding-right: h(10)}
.clickBox .num em{color: #fd7b58;font-style:normal }

.cartBg{text-align: center;padding-top: h(80)}
.cartBg em{width: h(319);height: h(252);background: url('/static/images/cart.png');background-size: 100%;display: block;margin: auto;}
.cartBg p{font-size: h(36);color:#c8c7c9;margin-top: h(30)}
.cartBg a{display: block;font-size: h(30);width: h(280);height:h(70);line-height: h(70);border-radius: h(8);background: #fd7b58;color: #fff;text-decoration: none;text-align: center;margin: auto;margin-top: h(70);}
</style>



